<template>
    <div class="container">
        <div class="flex-container">
            <div class="flex-item">
                <!-- <el-select v-model="options.mode" placeholder="提现状态">
                     <el-option v-for="item in options.modeItems" :key="item.sign" :label="item.name"
                                :value="item.sign"/>
                 </el-select>-->
                <div class="area" @click="region.show=!region.show">
                    <div v-if="region.province"> {{region.province}}-{{region.city}}-{{region.district}}</div>
                    <div v-else>全国</div>
                </div>
            </div>
            <el-button @click="addPrice">添加报价</el-button>
        </div>
        <el-table v-loading="dataset.loading" :data="dataset.items" class="el-mb-15" stripe>
            <el-table-column prop="id" label="ID"/>
            <el-table-column prop="region_text" label="生效地区"/>
            <el-table-column prop="garbage_text" label="垃圾名称"/>


            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="sureTixian(scope.row.id)" type="text" size="small">编辑
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <!--        <el-pagination
                    @size-change="eventUpdateRequestLimit" @current-change="controllerRequestListDataset"
                    :current-page="dataset.page" :page-size="dataset.limit" :total="dataset.total"
                    :page-sizes="[10, 50, 100, 200, 300]"
                    layout="total, sizes, prev, pager, next, jumper"
                />-->


        <van-popup v-model="region.show" position="bottom">
            <van-area :value="region.code" :area-list="region.areaList" @cancel="region.show = false"
                      @confirm="eventClickSelectOperate"/>
        </van-popup>
    </div>
</template>

<script>
    import {
        Table, TableColumn, Pagination,
        Button, Select, Option,
        Drawer, Dialog, Input,
        MessageBox, Message, Upload, Icon
    } from 'element-ui';
    import AreaList from "../../../src/libs/js/area.js";

    export default {
        components: {
            [Table.name]: Table,
            [TableColumn.name]: TableColumn,
            [Pagination.name]: Pagination,
            [Button.name]: Button,
            [Input.name]: Input,
            [Select.name]: Select,
            [Option.name]: Option,
            [Drawer.name]: Drawer,
            [Dialog.name]: Dialog,
            [MessageBox.name]: MessageBox,
            [Upload.name]: Upload,
            [Icon.name]: Icon,
        },
        data() {
            return {
                options: {
                    mode: '',
                    modeItems: [
                        {
                            name: '全部', sign: ""
                        }, {
                            name: '驳回', sign: 0
                        },
                        {
                            name: '待审核', sign: 1
                        },
                        {
                            name: '审核通过', sign: 2
                        },

                    ]
                },
                region: {
                    show: false,
                    name: '全国',
                    code: 0,
                    province: "",
                    city: "",
                    district: "",
                    areaList: {}
                },
                dataset: {
                    loading: false,
                    total: 0,
                    limit: 1000,
                    page: 1,
                    province: "",
                    city: "",
                    district: "",
                    startTime: "",
                    endTime: "",
                    items: []
                },
                curSureRow: {
                    id: "",
                    url: "",
                    remark: "",
                    host: "http://lj.hbweipai.com"
                },
                dialogVisible: false,
                data: {token: ""}
            }
        },
        mounted() {
            this.region.areaList = AreaList;
            this.controllerRequestListDataset();
            this.data.token = this.$store.state.options.user.token
        },
        methods: {
            eventClickSelectOperate(params) {
                console.log('params ', params)
                this.region.show = false;
                this.region.province = params[0].name;
                this.region.city = params[1].name;
                this.region.district = params[2].name;
                this.region.code = params[2].code;
                this.controllerRequestListDataset();

            },
            sureTixian(id) {
                this.$router.push({
                    name: "QuotedPriceEdits",
                    params: {
                        id: id
                    }
                })
            },
            addPrice() {
                this.$router.push({
                    path: "/quoted-list/add"
                })
            },

            controllerRequestListDataset(page) {
                if (this.dataset.loading) return; else this.dataset.loading = true;
                if (page) this.dataset.page = page;

                var url = '/api/admin/garbageprice/getcitylist',
                    params = {
                        page: this.dataset.page - 1,
                        list_rows: this.dataset.limit,
                        province: this.region.province,
                        city: this.region.city,
                        district: this.region.district,
                        startTime: this.dataset.startTime,
                        endTime: this.dataset.endTime,
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, {
                    success: (res) => {
                        // this.dataset.total = res.data.count;
                        this.dataset.items = res.data;
                    },
                    complete: (e) => {
                        this.dataset.loading = false;
                    }
                });
            },
            eventUpdateRequestLimit(limit) {
                if (this.dataset.loading) return;

                this.dataset.limit = limit;
                this.dataset.page = 0;
                this.dataset.total = 0;

                this.controllerRequestListDataset();
            },
            eventOnButtonOperate(mode, index) {
                this.drawer.handle = mode;

                switch (mode) {
                    case 'details':
                        var baseUrl = window.location.protocol + "//" + window.location.hostname,
                            item = this.dataset.items[index],
                            url = '/res/auto-login.html?token=' + this.$store.state.options.user.token;

                        if (window.location.port != 80 || window.location.port) {
                            // baseUrl += ':' + window.location.port;
                            baseUrl += ':' + 8089;
                        }

                        url += '&name=' + item.name;
                        url += '&phone=' + item.phone;
                        url += '&key=' + this.drawer.lastToken;

                        this.drawer.url = baseUrl + url;

                        this.drawer.lastToken = item.token;

                        this.drawer.show = true;
                        break;
                }
            }
        },
        watch: {
            'options.mode'(nVal, oVal) {
                this.options.mode = nVal;

                this.controllerRequestListDataset();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .select-width {
        width: 30vw;
    }

    .drawer-container {
        padding: 3.2rem;
    }

    .user-details {
        width: 414px;
        height: 736px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .area {
        border: 1px solid #DCDFE6;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
        margin-right: 10px;
        min-width: 200px;
        text-align: center
    }
</style>

